<template>
  <div class="customer-table-container">

    <!-- 操作工具栏 -->
    <div class="table-actions">
      <div class="left-actions">
        <el-button
            v-for="action in actions"
            :key="action.name"
            :type="action.type"
            size="small"
            @click="emitAction(action.name)"
        >
          {{ action.label }}
        </el-button>
      </div>

    </div>

    <!-- 数据表格 -->
    <el-scrollbar
        class="custom-scrollbar"
        always
        view-class="scrollbar-view"
    >
      <el-table
          :data="tableData"
          stripe
          style="width: 100%"
          @selection-change="handleSelectionChange"
      >



        <el-table-column type="selection" width="55" fixed="left" />
        <el-table-column align="center"
                         v-for="column in columns"
                         :key="column.prop"
                         :prop="column.prop"
                         :fixed="column.fixed"
                         :label="column.label"
                         :width="column.width"
        >

          <template #default="{ row }">
            <el-link
                v-if="column.prop === 'code'"
                type="primary"
                @click="emit('code-click', row)"
            >
              {{ row[column.prop] }}
            </el-link>
            <span v-if="column.prop === 'orderStatus'">
              <el-tag :type="getStatusType(row.orderStatus)" @click="handleStatusClick(row)"  style="cursor: pointer;" >
               {{ getStatusText(row.orderStatus) }}
              </el-tag>
            </span>
            <!--                    <span v-else>{{ row[column.prop] }}</span>-->
          </template>
        </el-table-column>

        <!-- 固定操作列 -->
        <el-table-column label="操作" width="180" fixed="right" align="center">
          <template #default="{ row }">

            <div class="operation-container">
              <!-- 修改链接 -->
              <el-link
                  type="primary"
                  :underline="false"
                  :disabled="[1, 3].includes(row.status)"
                  @click="$emit('edit', row)"
                  class="operation-link"
              >
                修改
              </el-link>

              <!-- 更多操作下拉菜单 -->
              <el-dropdown
                  trigger="hover"
                  placement="bottom-end"
                  @command="handleCommand($event, row)"
              >
                <el-link
                    type="primary"
                    :underline="false"
                    class="operation-link"
                >
                  更多
                </el-link>

                <template #dropdown>
                  <el-dropdown-menu class="operation-menu">
                    <!-- 审核/反审核 -->
                    <el-dropdown-item
                        v-if="row.orderStatus !==3"
                        command="audit"
                        @click="handleAudit(row)"
                        :icon="Finished"
                    >
                      审核
                    </el-dropdown-item>
                    <el-dropdown-item
                        v-if="[3].includes(row.orderStatus)"
                        command="reverseAudit"
                        :icon="Refresh"
                    >
                      反审核
                    </el-dropdown-item>

                    <!-- 打印 -->
                    <el-dropdown-item
                        command="print"
                        :icon="Printer"
                        divided
                    >
                      打印
                    </el-dropdown-item>

                    <!-- 作废 -->
                    <el-dropdown-item
                        command="invalidate"
                        :icon="Delete"
                        divided
                        @click="handleDelete(row)"
                        class="danger-item"
                    >
                      作废
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-scrollbar>

    <!-- 分页组件 -->
    <div class="pagination-wrapper">
      <el-pagination
          background
          layout="prev, pager, next"
          :total="total"
          :page-size="pageSize"
          :current-page="currentPage"
          @current-change="handlePageChange"
      />
    </div>
  </div>
  <el-dialog
      v-model="auditDialogVisible"
      title="审核详情"
      width="600px"
      :close-on-click-modal="false"
  >
    <div v-if="currentAudit.statusCode === 0" class="audit-pending">
      <el-alert type="info" :closable="false">
        当前单据未审核，请等待审核
      </el-alert>
    </div>


    <div v-else-if="currentAudit.statusCode === 1" class="audit-processing">
      <el-descriptions :column="1" border>
        <el-descriptions-item label="审核人">
          {{ currentAudit.auditor || '系统自动分配' }}
        </el-descriptions-item>
        <el-descriptions-item label="当前状态">
          <el-tag type="info">审核中</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="发起时间">
          {{ currentAudit.time || '-' }}
        </el-descriptions-item>
        <el-descriptions-item label="审核意见">
          {{ currentAudit.comment }}
        </el-descriptions-item>
      </el-descriptions>
    </div>




    <div v-else class="audit-details">
      <el-descriptions :column="1" border>
        <el-descriptions-item label="审核人">
          {{ currentAudit.auditor || '-' }}
        </el-descriptions-item>
        <el-descriptions-item label="审核结果">
          <el-tag :type="currentAudit.result ? 'success' : 'danger'">
            {{ currentAudit.result ? '通过' : '拒绝' }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="审核时间">
          {{ currentAudit.time || '-' }}
        </el-descriptions-item>
        <el-descriptions-item label="审核意见">
          {{ currentAudit.comment || '无' }}
        </el-descriptions-item>
      </el-descriptions>
    </div>

    <template #footer>
      <el-button @click="auditDialogVisible = false">关 闭</el-button>
    </template>
  </el-dialog>


</template>

<script setup lang="ts">
import { Delete, Printer, Refresh, Finished } from '@element-plus/icons-vue'

import {ref, computed,reactive} from 'vue'
const auditDialogVisible = ref(false)
const currentAudit = reactive({
  statusCode: 0,
  auditor: '',
  result: true,
  time: '',
  comment: ''
})

const handleCommand = (command: string, row: any) => {
  switch(command) {
    case 'audit':
      emit('audit', row)
      break
    case 'reverseAudit':
      emit('reverse-audit', row)
      break
    case 'print':
      window.print()
      break
    case 'invalidate':
      emit('invalidate', row)
      break
  }
}

const handleStatusClick = (row: any) => {
  // 获取审核数据（示例数据）
  currentAudit.statusCode = row.status || 0
  currentAudit.auditor = row.checkmanIdStr
  currentAudit.result =[2,3].includes(row.status) ? (row.status === 3) : false
  currentAudit.time = row.checkTime
  currentAudit.comment = row.checkComment

  auditDialogVisible.value = true
}
const statusConfig = reactive({
  0: { text: '未审核', type: 'warning', color: '#e6a23c' },
  1: { text: '审核中', type: 'warning', color: '#2478CA' },
  2: { text: '审核未通过', type: 'danger', color: '#f56c6c' },
  3: { text: '已审核', type: 'success', color: '#67c23a' }
})

// 获取状态标签类型
const getStatusType = (status: number) => {
  return statusConfig[status]?.type || 'info'
}

// 获取状态显示文本
const getStatusText = (status: number) => {
  return statusConfig[status]?.text || '未知状态'
}

const props = defineProps({
  // 表格列配置
  columns: {
    type: Array as () => Array<{
      prop: string
      label: string
      width?: number
    }>,
    default: () => [
      {prop: 'code', label: '客户编码', width: 150},
      {prop: 'name', label: '客户名称', width: 200},
      {prop: 'category', label: '客户分类'},
      {prop: 'status', label: '状态', width: 120},
      {prop: 'operate', label: '操作'}

    ]
  },
  // 表格数据（已分页）
  tableData: {
    type: Array as () => any[],
    required: true
  },
  // 总数据量
  total: {
    type: Number,
    required: true
  },

  // 当前页码
  currentPage: {
    type: Number,
    required: true
  },
  // 每页显示条数
  pageSize: {
    type: Number,
    default: 5
  }
})

const emit = defineEmits(['page-change', 'action'])

// 操作按钮配置
const actions = ref([
  {name: 'add', label: '新增', type: 'success'},
  {name: 'import', label: '导入', type: 'warning'},
  {name: 'export', label: '导出', type: 'danger'},
])

// 编辑事件
const handleEdit = (row: any) => {
  emit('edit', row); // 触发编辑事件
}

//删除事件
const handleDelete = (row: any) => {
  emit('delete', row); // 触发删除事件
}

// 分页变化处理
const handlePageChange = (newPage: number) => {
  emit('page-change', newPage)
}

// 操作按钮事件
const emitAction = (actionName: string) => {
  emit('action', actionName)
}

// 触发行审核事件
const handleAudit = (row: any) => {
  emit('row-audit', row)
}

// 多选处理
const selectAll = ref(false)
const selectedRows = ref<any[]>([])



const handleSelectionChange = (selection: any[]) => {
  selectedRows.value = selection
  emit('selection-change', selection)
}

const handleSelectionReSubmit = (selection: any[]) => {
  selectedRows.value = selection
  emit('reSubmit', selection)
}

</script>

<style scoped>
.audit-pending {
  padding: 20px;
  text-align: center;
}

.audit-details {
  padding: 15px;

  :deep(.el-descriptions__label) {
    width: 100px;
    font-weight: 500;
  }

  :deep(.el-descriptions__content) {
    padding-left: 20px;
  }
}


.customer-table-container {
  background: #fff;
  padding: 16px;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.table-actions {
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;
}

.left-actions {
  display: flex;
  gap: 8px;
}

.pagination-wrapper {
  margin-top: 16px;
  display: flex;
  justify-content: flex-end;
}

.el-tag {
  padding: 0 8px;
  height: 24px;
  line-height: 24px;
}

.audit-processing {
  :deep(.el-tag) {
    background-color: #e8f4ff;
    border-color: #2478CA;
  }
}
::v-deep .el-table__fixed-right::before,
::v-deep .el-table__fixed::before {
  background-color: transparent !important;
}

/* 多固定列层级调整 */
::v-deep .el-table__fixed {
  z-index: 2 !important; /* 使单据编号列覆盖选择列阴影 */
}

.operation-container {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.operation-link {
  padding: 0 4px;
  transition: color 0.3s;

  &:hover:not(.is-disabled) {
    color: var(--el-color-primary);
    background-color: var(--el-color-primary-light-9);
  }

  &.is-disabled {
    color: var(--el-disabled-text-color);
    cursor: not-allowed;
  }
}

/* 下拉菜单样式 */
.operation-menu {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

  :deep(.el-dropdown-menu__item) {
    padding: 8px 20px;
    font-size: 13px;

    &:hover {
      background-color: var(--el-color-primary-light-9);
    }
  }

  .danger-item {
    color: var(--el-color-danger);

    &:hover {
      color: var(--el-color-danger);
      background-color: var(--el-color-danger-light-9);
    }
  }
}

</style>
